<template>
   <div class="loginContainer" :style="{height:loginHeight+'px'}">
      <div class="login">
         <div class="loginHeader">
            <div>{{ form.loginText }}</div>
         </div>
         <div class="loginCenter">
            <el-input v-model="form.userCode" placeholder="请输入账号" prefix-icon="el-icon-user"></el-input>
            <el-input v-model="form.password" placeholder="请输入密码" show-password
                      prefix-icon="el-icon-lock"></el-input>
            <el-button type="primary" class="loginBtn" @click="submitLogin">{{ form.loginText }}</el-button>
            <div class="login-links">
               <router-link to="/register">用户注册</router-link>
               <span class="divider">|</span>
               <router-link to="/">返回首页</router-link>
            </div>
         </div>
      </div>
   </div>
</template>
<script>
import axiosUtil from '@/utils/axiosUtil'
import loginUtil from '@/utils/loginUtil'

export default {
   data() {
      return {
         loginHeight: 740,
         form: {
            userRole: 'user',
            userCode: null,
            password: null,
            loginText: '用户登录'
         }
      }
   },
   mounted() {
      //设置高度随窗口高度变化
      this.loginHeight = window.innerHeight;
      window.onresize = () => {
         this.loginHeight = window.innerHeight;
      }
   },
   methods: {
      submitLogin() {
         if (this.form.userCode == null || this.form.password == null) {
            this.$notify.error({
               title: '错误',
               message: '账号或密码未输入'
            });
            return;
         }
         axiosUtil.postForm({
            url: '/login/userLogin',
            data: this.form,
            success: res => {
               loginUtil.saveLogin(this.form.userCode, res.data.token, 'user')
               //如果redirect不为空，则进行跳转，否则跳转到用户端首页
               let redirect = this.$route.query.redirect || '/client/layout'
               this.$router.push(redirect)
            }
         })
      }
   }
}
</script>
<style>
.loginContainer {
   background: url("@/assets/loginbg.jpg") left bottom /cover no-repeat;
}

.login {
   width: 300px;
   height: 280px;
   border: 1pt solid black;
   position: absolute;
   left: 50%;
   top: 50%;
   margin-left: -150px;
   margin-top: -150px;
   background-color: honeydew;
   border-radius: 3px;
}

.loginHeader div {
   width: 300px;
   height: 45px;
   line-height: 45px;
   text-align: center;
   background-color: bisque;
}

.loginCenter {
   width: 80%;
   margin-left: auto;
   margin-right: auto;
   margin-top: 35px;
   text-align: center;
}

.loginCenter > div {
   margin-bottom: 10px;
}

.loginBtn {
   margin-top: 15px;
   width: 100%;
   margin-bottom: 15px;
}

.login-links {
   display: flex;
   justify-content: center;
   align-items: center;
   gap: 10px;
   font-size: 14px;
}

.login-links a {
   color: #409EFF;
   text-decoration: none;
}

.login-links a:hover {
   text-decoration: underline;
}

.divider {
   color: #909399;
}

</style>
